<template>
  <div class="merchants">
		 <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">创建预约</span>
      <span class="header-wrap-right"></span>
    </div>
        <!-- 选择商品 -->
    <div class="merchants-content">
        <div class="merchants-list" @click="showMerchants" v-if="merchantsName">
            <span>{{merchantsName}}</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
        </div>
        <div class="merchants-list" @click="showMerchants" v-else>
            <span>请选择预约类型</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
        </div>
    </div>
   <div class="merchants-content">
       <div class="merchants-list" @click="showpPicker" v-if="time">
           <span>{{time}}</span>
           <span><i class="iconfont icon-xiajiantou"></i></span>
       </div>
       <div class="merchants-list" @click="showpPicker" v-else>
           <span>请选择办理时间</span>
           <span><i class="iconfont icon-xiajiantou"></i></span>
       </div>
   </div>
        <!-- 姓名 -->
    <div class="merchants-content">
        <div class="merchants-list">
            <van-field clearable v-model="name" placeholder="请输入姓名" />
        </div>
    </div>
    <!-- 商户实际经营地址 -->
    <div class="merchants-content" >
        <div class="merchants-list">
            <van-field clearable v-model="address" placeholder="请输入家庭住址" />
        </div>
    </div>

    <!-- 电话号码 -->
    <div class="merchants-content">
        <div class="merchants-list">
            <van-field clearable v-model="mobile" placeholder="请输入电话号码" />
        </div>
    </div>
    <!-- 确定 -->
    <div class="merchants-content" style="margin-top: .7rem;">
        <div class="submit" @click="addVolunteer">
            确定
        </div>
    </div>
    <van-popup v-model="timePop" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        @cancel="cancel"
        @confirm="confirm"
        :formatter="formatter"
        :min-date="minDate"
      />
    </van-popup>
    	<!-- 选择  -->
    <van-popup v-model="PickerMerchants" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="cancel"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Area,Popup,Picker,Dialog,Field,DatetimePicker } from 'vant';
export default {
  data(){
    return{
        minDate: new Date(),
        currentDate: new Date(),
        datePicker: '',
        contacts:'',
        mobile:'',
        address:'',
        name:'',
        listData:[],
        household_name:'',
        merchantsName:'',
        merchantsId:null,
        address:'',
        merchants: '',
        merchantsId: null,
        PickerMerchants:false,
        Pickermerchants:false,
        timePop:false,
        time: null,
        translateValue:null,
        translateId:null,
        columns:[],
        time1:''
    }
  },
  created(){
    this.quarters()
    this.menu()
  },
  methods:{
    showpPicker(){
      this.timePop = true
    },
    showMerchants(){
        this.PickerMerchants = true;
    },
    translateFn(value){
      this.translateValue = value.text;
      this.translateId = value.id;
      this.translatePop = false
    },
    confirm(value){
      var date = value
      this.time = date.getFullYear()
       + '-' +((date.getMonth() + 1)<=9?('0'+(date.getMonth() + 1)):(date.getMonth() + 1))
       + '-' + (date.getDate()<=9?('0'+date.getDate()):date.getDate())
       + ' ' + (date.getHours()<=9?('0'+date.getHours()):date.getHours())
       + ':' + (date.getMinutes()<=9?('0'+date.getMinutes()):date.getMinutes());
      this.timePop = false
      var date1 = new Date(this.time);
      this.time1 = date.getTime();
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      }else if (type === 'month'){
        return `${value}月`
      }else if (type === 'day'){
        return `${value}日`
      }else if (type === 'hour'){
        return `${value}时`
      }else if (type === 'minute'){
        return `${value}分`
      }
      return value;
    },
    menu(){
      window.scrollTo(0, 0)
    },
    goback(){
      this.$router.go(-1)
    },
    addVolunteer(){
        var reg = /^([1][0-9]{10})$/;
      if(!this.merchantsName){
        this.$toast('请选择预约类型')
        return
      }
	    if(!this.time){
        this.$toast('请选择办理时间')
        return
      }
        if(!this.name){
      this.$toast("请输入姓名");
      return
      }
      if(!this.address){
        this.$toast('请输入家庭住址')
        return
      }
        if(!this.mobile){
      this.$toast("请输入电话号码");
      return
      }
        if(!reg.test(this.mobile)){
      this.$toast("手机格式不正确");
      return
      }

      this.$post(api.Appointment, {
          name: this.name,
          appoint: this.time1,
          category_id: this.merchantsId,
          mobile: this.mobile,
          address:this.address
      })
      .then((response) => {
        if(response.data.code===1){
          this.$toast('添加成功!')
          this.address = '',
          this.mobile = '',
          this.time = '',
          this.name = ''
          }else{
            this.$toast(response.data.msg)
          }
        })
      .catch((error) => {
        console.log(error);
      });
    },
	//获取分类列表
    quarters(){
      this.$get(api.Category,{
        params: {
          type: 2
        }
      })
      .then((response) => {
        console.log('response',response)
        if(response.data.code==1){
          this.columns = response.data.data.list
            this.columns.forEach((element,index) => {
            this.columns[index].text = element.name
            this.columns[index].textId = element.id
          });
          console.log('分类列表',this.columns)
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    cancel(){
      this.timePop = false
      this.PickerMerchants = false;
    },
    onConfirm(value) {
      this.merchantsName = value.text
      this.merchantsId = value.id
      this.PickerMerchants = false;
    },
  },
  components:{
    [Area.name]:Area,
    [Popup.name]:Popup,
    [Picker.name]:Picker,
    [Field.name]:Field,
    [DatetimePicker.name]:DatetimePicker,
    [Dialog.Component.name]: Dialog.Component
  }
}
</script>
<style>
.merchants .merchants-list .van-cell{
  background: none;
  color: #000;
  line-height: .55rem;
  padding: .24rem .3rem;
}
.merchants .van-field__control{
  font-size: .28rem;
}
</style>

<style scoped>
.merchants{
    margin-top: 1rem;
}
.list-content{
  display: flex;
  margin:.15rem .2rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .45rem;
  font-weight: bold;
}
.list-content span{
  flex: 1;
}
.merchants .repairDetail-list{
  margin-bottom: .2rem;
  font-weight: bold;
}
.merchants .repairDetail-list .van-cell{
  background: none;
  padding: .26rem .3rem;
}
.merchants .repairDetail-textarea .van-cell{
  background: #2E294E;
  padding: .15rem .15rem;
  border: 1px solid #57c5c6;
  border-radius: .2rem;
}
.list-title{
	margin-left: .3rem;
}
.van-dialog{
  width: 75%;
}
.merchants-content{
  padding: .35rem .3rem;
  color: #000;
  font-weight: bold;
}
.merchants-title{
  display: block;
  margin-bottom: .2rem;
  font-size: .32rem;
}
.merchants-list{
  background: #fff;
  display: flex;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  border: 0.02rem solid #ddd;
}
.merchants-list span:nth-of-type(1){
  text-indent: .35rem;
  flex: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.merchants-list span:nth-of-type(2){
  text-align: center;
  flex: 1;
}
.submit{
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}
.noticeDetail-tips{
	margin: 0 .5rem;
}
.noticeDetail-tips span{
	line-height: .8rem;
	display: block;
	border-bottom: 1px solid #ccc;
}
.parcelDetail .parcelDetail-list{
  margin-bottom: .3rem;
}
.parcelDetail .parcelDetail-list .van-cell{
  background: none;
  padding: .26rem .3rem;
}
.parcelDetail .parcelDetail-textarea .van-cell{
  background: #2E294E;
  padding: .15rem .15rem;
  border: 1px solid #3B3564;
  border-radius: .2rem;
}
.list-title{
  display: block;
  margin:0rem .8rem;
  color: #57c5c6 ;
  font-weight: bold;
}
.list-content{
  display: flex;
  margin:.15rem .25rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .45rem;
}
.list-content span{
  color: #000;
  width: auto;
  height: 1rem;
  line-height: 1rem;
}
.list-content span:nth-of-type(2){
  text-indent: .1rem;
  flex: 5;
}
.list-content span:nth-of-type(3){
  flex:1.5;
  text-align: center;
  font-weight:100;
}
.list-content span img{
  margin: .28rem .15rem 0 .35rem;
  width: .4rem;
  height: .4rem;
}
</style>
